<template>
	<view class="wrapper" :style="{padding:`calc(60rpx + ${safeTop}px) 0 180rpx`}">
		<div class="header posf bfff space-between" :style="{padding: `${safeTop}px 200rpx 20rpx 30rpx`}">
			<u-icon name="arrow-left" color="#231815" size="22" class="back-icon" @click="back(1)"></u-icon>
			<!-- <button open-type="share">
				<image src="../../static/shouye/share.png" mode="widthFix" class="share-icon "></image>
			</button> -->

		</div>
		<!-- 电影信息 -->
		<div class="bfff">
			<div class="align-start video-info">
				<div class="cover posr mr25">
					<image :src="list.poster" mode="aspectFill" class="cover "></image>
					<div class="cfff type-box posa f20">{{list.showmark}}</div>
				</div>
				<div class="flex1">
					<div class="f40 c333 fbold mt15 mb30">{{list.name}}</div>
					<div class="c999 f24">{{list.type}}/{{list.country}}</div>
					<div class="c999 f24 mt15 mb15">{{list.opentime}}上映/{{list.duration}}分钟 </div>
					<div class="c999 f24 mb15">评分 <text class="cyellow">{{list.score}}分</text>
					</div>
					<div class="flex-start f20 c999">
						<div class="tag">{{list.showversion}}</div>
					</div>
				</div>
			</div>
			<div class="center mt35 mb20">
				<div class="f30 fbold c333 flex1">简介</div>
				<div class="center" @click="showMore=!showMore">
					<div class="f22 c999 mr5">{{showMore?'收起':'展开'}}</div>
					<u-icon name="arrow-down" color="#999" size="14" v-if="!showMore"></u-icon>
					<u-icon name="arrow-up" color="#999" size="14" v-else></u-icon>
				</div>

			</div>

			<div class="f24 line15  c666" :class="showMore?'':'u-line-3'">
				{{list.description}}
			</div>
		</div>
		<!-- 演职人员 -->
		<div class="bfff mt20">
			<div class="center mb30">
				<div class="f30 fbold c333 flex1">演职人员</div>
				<div class="center" @click="openPage('./yanZhi')">
					<div class="f22 c999 mr5">全部{{list.actorlist.length}}人</div>
					<u-icon name="arrow-right" color="#999" size="14"></u-icon>
				</div>
			</div>
			<div class="users-box">
				<div class="user tCenter" v-for="(v,item) in list.actorlist" :key="item">
					<image :src="v.avatar" mode="aspectFill" class="user-pohoto" @click="prevActor(item)"></image>
					<div class="f30 mt20 mb10 nowrap">{{v.name}}</div>
					<div class="f26 c666 nowrap">{{v.profession}}</div>
				</div>
				<u-empty text="暂无演职人员" v-if="list.actorlist==''" mode="list"
					icon="http://cdn.uviewui.com/uview/empty/list.png">
				</u-empty>
			</div>
		</div>
		<!-- 视频 -->
	<!-- 	<div class="bfff">
			<div class="center mb30">
				<div class="f30 fbold c333 flex1">视频</div>
				<div class="center" @click="openPage('./shiPins')">
					<div class="f22 c999 mr5">全部{{list.video.length}}个</div>
					<u-icon name="arrow-right" color="#999" size="14"></u-icon>
				</div>
			</div>
			<div class="users-box">
				<div class="user tCenter video-box posr" v-for="(v,i) in list.video" :key="i" @click="prevVideo(v)">
					<video :show-center-play-btn="false" :src="v.coverUrl" :controls="false" class="video-cover"></video>
					<div class="posa play center">
						<u-icon name="play-circle-fill" color="#fff" size="30"></u-icon>
					</div>
				</div>
				<u-empty text="暂无视频" v-if="list.video==''" mode="list"
					icon="http://cdn.uviewui.com/uview/empty/list.png">
				</u-empty>
			</div>
		</div> -->
		<!-- 剧照 -->
		<div class="bfff">
			<div class="center mb30">
				<div class="f30 fbold c333 flex1">剧照</div>
				<div class="center" @click="openPage('./juZhao')">
					<div class="f22 c999 mr5">全部{{list.trailerlist.length}}个</div>
					<u-icon name="arrow-right" color="#999" size="14"></u-icon>
				</div>
			</div>
			<div class="users-box">
				<div class="user tCenter video-box posr" v-for="(v,i) in list.trailerlist" :key="i" @click="prevImg(v)">
					<image :src="v" mode="aspectFill" class="video-cover"></image>
				</div>
			</div>
		</div>
		<div class="posf bottom center">
			<div class="flex1">

			</div>
			<div class="btheme bth-red" @click="openPage('/pages/dianYing/dianYing?movieId='+movieId+'&name='+list.name)">
				立即购票</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showMore: false,
				movieId: '',
				list: {
					trailerlist: [],
					actorlist: [],
					video: []
				}
			};
		},
		onLoad(e) {
			this.movieId = e.movieId
			this.getMoviefindOne()
		},
		methods: {
			prevVideo(v) {
				console.log(v.androidPadUrl)
				uni.previewMedia({
					sources: [{
						url: v.iphoneUrl,
						type: 'video'
					}]
				})
			},
			// 演职人员照片放大功能
			prevActor(item) {
				let that = this
				uni.previewImage({
					urls: this.list.actorlist.map(v => {
						return v.avatar
					}),
					current: item
				})
			},
			// 剧照照片放大功能
			prevImg(i) {
				let that = this
				uni.previewImage({
					urls: that.list.trailerlist,
					current: i
				})
			},
			// 查询电影详情
			getMoviefindOne() {
				this.$http('/api/movie/findOne', {
					moiveId: this.movieId
				}).then((r) => {
					r.data.trailerlist = r.data.trailerlist.split(',')
					r.data.trailerlist = r.data.trailerlist.map(v => {
						return 'http:' + v
					})
					  uni.setStorageSync('trailerlist', r.data.trailerlist)
					if (r.data.actorlist) {
						r.data.actorlist = JSON.parse(r.data.actorlist)
						r.data.actorlist = r.data.actorlist.map(v => {
							v.avatar = 'http:' + v.avatar
							return v
						})
					} else {

					}
					  uni.setStorageSync('actorlist', r.data.actorlist)
				  if(r.data.video==''){
				 	r.data.video ="[]";
				  }
				  r.data.video = JSON.parse(r.data.video)
				  uni.setStorageSync('video', r.data.video)
					// if(r.data.video==''){
					// 	r.data.video =[];
					// 	uni.removeStorageSync('video')
					// }else{
					// 	r.data.video = r.data.video.split(',')
					// 	uni.setStorageSync('video', r.data)
					// } 
					// console.log("长度=="+r.data.video.length)
					
					this.list = r.data
				})
			},
			// 3月5日写
			// prevActor(item){
			// 	let that = this
			// 	uni.previewImage({
			// 		urls: that.list.actorlist.map(v => {
			// 			return v.avatar
			// 		}),
			// 		current: item
			// 	})
			// },
			// prevImg(i) { 
			// 	let that = this
			// 	uni.previewImage({
			// 		urls: that.list.trailerlist,
			// 		current: i
			// 	})
			// },
			// getMoviefindOne() {
			// 	this.$http('/api/movie/findOne', {
			// 		moiveId: this.movieId
			// 	}).then((r) => {

			// 		r.data.trailerlist = r.data.trailerlist.split(',')
			// 		r.data.trailerlist = r.data.trailerlist.map(v => {
			// 			return 'http://' + v
			// 		})
			// 		r.data.actorlist = JSON.parse(r.data.actorlist)
			// 		console.log(r)
			// 		r.data.actorlist = r.data.actorlist.map(v =>{
			// 			v.avatar = 'http://' + v.avatar
			// 			return v
			// 		})
			// 		uni.setStorageSync('video',r.data)
			// 		this.list = r.data
			// 	})
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.bth-red {
		width: 220rpx;
		height: 60rpx;
		border-radius: 30rpx;
	}

	.bottom {
		width: 100%;
		left: 0;
		bottom: 0;
		padding: 20rpx 30rpx;
		background: #fff;
		box-shadow: 0 -2rpx 10rpx 1rpx #e0e0e1;
	}

	.users-box {
		white-space: nowrap;
		overflow-x: auto;

		.video-box {
			width: 300rpx;
			height: 180rpx;
			border-radius: 10rpx;

			.play {
				width: 40rpx;
				height: 40rpx;
				left: calc(50% - 20rpx);
				top: calc(50% - 20rpx);
			}

			.cfff {
				left: 15rpx;
				bottom: 10rpx;
				width: 280rpx;
			}

			.video-cover {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}

		.user {
			margin-right: 15rpx;
			display: inline-block;
		}

		.user-pohoto {
			width: 160rpx;
			height: 250rpx;
			border-radius: 10rpx;
		}
	}

	.video-info {
		.tag {
			border: 1rpx solid #999;
			border-radius: 6rpx;
			padding: 4rpx 10rpx;
			margin-right: 6rpx;
		}

		.type-box {
			top: 8rpx;
			left: 8rpx;
			background: rgba(0, 0, 0, .7);
			padding: 6rpx;
			border-radius: 6rpx;
		}

		.cover {
			width: 195rpx;
			height: 270rpx;
			border-radius: 15rpx;
		}
	}

	.bfff {
		padding: 40rpx;
	}

	.header {
		width: 750rpx;
		top: 0;
		left: 0;

		.share-icon {
			width: 30rpx;
			height: 22rpx;

		}
	}
</style>